<template>
  <view class="container">
    <view class="header">
      <image class="bg" :src="$Config.get('imageUrl')+'/data/head.png'" mode="scaleToFill"/>
      <view class="content">
        <view class="left">
          <view class="p1">{{ stat.inviteTotalShare }}</view>
          <view class="p2">股权奖励</view>
        </view>
<!--        <view class="right">-->
<!--          <view class="p1">35<span>万</span></view>-->
<!--          <view class="p2">现金奖励</view>-->
<!--        </view>-->
      </view>
    </view>
    <view class="content">
<!--      <u-tabs :list="tabs" @click="click"></u-tabs>-->
      <view class="list" v-if="list.length > 0">
        <view class="item" v-for="(item,i) in list " :key="i">
          <view class="left">
            <view class="p1">推广奖励</view>
            <view class="p2">邀请用户:{{ item.userName }}</view>
            <view class="p2">完成时间:{{ item.addTime }}</view>
          </view>
          <view class="right">
            <view class="p1">
              <image class="image" :src="$Config.get('imageUrl')+'/user/money.png'"/>
              <span>股权</span>
            </view>
            <view class="p2">+{{ item.shareAmount }}</view>
          </view>
        </view>
      </view>
      <empty v-if="list.length == 0" :isLoading="false" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无数据" />
    </view>
  </view>
</template>

<script>
import { getUserStat,numTimes } from '@/core/app'
export default {
  data() {
    return {
      tabs: [{
        name: '全部',
      }, {
        name: '股权奖励',
      }, {
        name: '现金奖励'
      }],
      stat:{
        inviteTotalShare:0,
      },
      list: []
    }
  },
  onShow(){
    this.stat = getUserStat();
    console.log(this.stat)
    this.getList();
  },
  methods: {
    click(e) {
      console.log(e)
    },
    getList() {
      this.$request.get('wx/invite/rewardList').then(res => {
        this.list = res.data.items;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20rpx 40rpx;
  background: #F7F7F7;
  min-height: 100vh;
  .header {
    height: 220rpx;
    border-radius: 26rpx 26rpx 0 0;
    color: #FFF;
    position: relative;
    overflow: hidden;
    .content {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 80rpx;

      .left {
        text-align: center;
        color: #FFFFFF;
        position: relative;

        .p1 {
          font-size: 48rpx;
          font-weight: bold;
        }

        .p2 {
          margin-top: 14rpx;
          font-size: 28rpx;
          font-weight: 500;
        }

        //&:before {
        //  content: '';
        //  position: absolute;
        //  top: 50%;
        //  right: -40rpx;
        //  width: 2rpx;
        //  height: 60rpx;
        //  background: rgba(255, 255, 255, 0.12);
        //  transform: translateY(-50%);
        //}
      }

      .right {
        .p1 {
          font-size: 48rpx;
          font-weight: bold;

          span {
            font-size: 24rpx;
            font-weight: 200;
            margin-left: 6rpx;
          }
        }

        .p2 {
          margin-top: 10rpx;
          font-size: 28rpx;
          font-weight: 500;
        }
      }
    }
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  }
  .list{
    margin-top: 20rpx;
    .item{
      background: #FFF;
      border-radius: 10rpx;
      padding: 20rpx 40rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        .p1{
          font-size: 32rpx;
          font-weight: 500;
          color: #010812;
        }
        .p2{
          font-size: 24rpx;
          font-weight: 400;
          color: #6F6F6F;
          margin-top: 10rpx;
        }
      }
      .right{
        .p1{
          font-size: 24rpx;
          font-weight: 400;
          color: #6F6F6F;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .image{
            width: 32rpx;
            height:32rpx;
            margin-right: 6rpx;
            image{
              width: 100%;
              height: 100%;
            }
          }
        }
        .p2{
          margin-top: 10rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #F74F4F;
        }
      }
    }
  }
}
</style>